<template>
  <transition name="dialog-fade">
    <div v-if="isVisible" class="confirm-close-overlay" @mousedown.self="handleCancelInternal">
      <div class="confirm-close-dialog" role="dialog" aria-modal="true" aria-labelledby="confirmCloseDialogTitle">
        <h3 id="confirmCloseDialogTitle" class="dialog-title">关闭选项</h3>
        <p class="dialog-message">您希望如何处理应用程序？</p>
        
        <div class="dialog-radio-group">
          <div class="radio-option">
            <input type="radio" id="radioMinimizeToTray" value="tray" v-model="selectedCloseAction" class="radio-input" ref="trayRadio">
            <label for="radioMinimizeToTray" class="radio-label">最小化到托盘</label>
          </div>
          <div class="radio-option">
            <input type="radio" id="radioDirectClose" value="close" v-model="selectedCloseAction" class="radio-input">
            <label for="radioDirectClose" class="radio-label">直接关闭</label>
          </div>
        </div>

        <div class="dialog-checkbox-container">
          <input type="checkbox" id="dontAskAgainCheckbox" v-model="dontAskAgain" class="checkbox-input">
          <label for="dontAskAgainCheckbox" class="checkbox-label">不再提示我</label>
        </div>

        <div class="dialog-final-actions">
          <button @click="handleConfirm" class="btn btn-confirm">确定</button>
          <button @click="handleCancelInternal" class="btn btn-secondary">取消</button>
        </div>

      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'ConfirmCloseDialog',
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dontAskAgain: false,
      selectedCloseAction: 'tray', // Default to 'tray'
    };
  },
  watch: {
    isVisible(newValue) {
      if (newValue) {
        this.dontAskAgain = false;
        this.selectedCloseAction = 'tray'; // Reset to default when dialog appears
        this.$nextTick(() => {
          // Focus the first radio button or the confirm button
          if (this.$refs.trayRadio) {
            this.$refs.trayRadio.focus();
          }
        });
      }
    }
  },
  methods: {
    handleConfirm() {
      console.log(`[ConfirmCloseDialog] Emitting chose-action with: selectedCloseAction=${this.selectedCloseAction}, dontAskAgain=${this.dontAskAgain} (type: ${typeof this.dontAskAgain})`);
      this.$emit('chose-action', this.selectedCloseAction, this.dontAskAgain);
    },
    handleCancelInternal() {
      this.$emit('chose-action', 'cancel', false); // 'dontAskAgain' is irrelevant for cancel
    },
  },
};
</script>

<style scoped>
/* All styles now use CSS Variables for theming */

.confirm-close-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(var(--theme-shadow-color-rgb), 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050; 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.confirm-close-dialog {
  background-color: var(--theme-bg-tertiary);
  padding: 28px 35px;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--theme-shadow-popover);
  width: 90%;
  max-width: 420px;
  text-align: left;
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
}

.dialog-title {
  color: var(--theme-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-top: 0;
  margin-bottom: var(--spacing-base);
  text-align: center;
}

.dialog-message {
  color: var(--theme-text-secondary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-base);
  text-align: center;
}

.dialog-radio-group {
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--spacing-xs) 0;
}

.radio-input {
  margin-right: var(--spacing-md);
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: var(--border-width) var(--border-style) var(--theme-border-input);
  border-radius: var(--border-radius-circle);
  background-color: var(--theme-bg-input);
  cursor: pointer;
  position: relative;
  outline: none;
  transition: background var(--transition-duration-short), border-color var(--transition-duration-short);
  flex-shrink: 0;
}

.radio-input:checked {
  background: var(--theme-accent-primary);
  border-color: transparent;
}

.radio-input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--theme-text-on-accent);
  border-radius: var(--border-radius-circle);
  transform: translate(-50%, -50%);
}

.radio-input:focus {
  border-color: var(--theme-accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-primary-rgb), 0.3);
}

.radio-label {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  flex-grow: 1;
  line-height: 1.5;
}

.dialog-checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-xs) 0;
}

.checkbox-input {
  margin-right: var(--spacing-sm);
  appearance: none;
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background-color: var(--theme-bg-input);
  border: var(--border-width) var(--border-style) var(--theme-border-input);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background var(--transition-duration-short), border-color var(--transition-duration-short);
}

.checkbox-input:checked {
  background: var(--theme-accent-primary);
  border-color: transparent;
}

.checkbox-input:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid var(--theme-text-on-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.checkbox-input:focus {
  border-color: var(--theme-accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-primary-rgb), 0.3);
}

.checkbox-label {
  color: var(--theme-text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1.5;
}

.dialog-final-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-base);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-base);
  border-top: var(--border-width) var(--border-style) var(--theme-border-primary);
}

.btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-base);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: background var(--transition-duration-base), transform var(--transition-duration-short), box-shadow var(--transition-duration-base);
  letter-spacing: 0.5px;
  font-size: var(--font-size-base);
  box-shadow: 0 1px 3px rgba(var(--theme-shadow-color-rgb), var(--theme-shadow-opacity-light));
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(var(--theme-shadow-color-rgb), var(--theme-shadow-opacity-medium));
}
.btn:active {
  transform: translateY(0px);
  box-shadow: inset 0 1px 2px rgba(var(--theme-shadow-color-rgb), var(--theme-shadow-opacity-light));
}

.btn-confirm {
  background: var(--theme-accent-primary); /* Main accent for confirm */
  color: var(--theme-text-on-accent);
}
.btn-confirm:hover { background: var(--theme-accent-highlight); } /* Use highlight for hover */

.btn-secondary {
  background-color: var(--theme-bg-button-secondary);
  color: var(--theme-text-secondary);
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
}
.btn-secondary:hover { 
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary); 
}

/* Dialog Transition */
.dialog-fade-enter-active,
.dialog-fade-leave-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dialog-fade-enter,
.dialog-fade-leave-to {
  opacity: 0;
}
.dialog-fade-enter .confirm-close-dialog,
.dialog-fade-leave-to .confirm-close-dialog {
  transform: scale(0.95) translateY(10px);
}

</style> 